<template>
  <div class="about">
     <!--搜索-->
        <el-row>
            <el-col :span="6"><el-input v-model="loginName" size="mini" auto-complete="off" placeholder="请输入登陆账号"></el-input></el-col>
            <el-col :span="6"><el-button type="primary" @click="search"  size="mini" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light">&nbsp;</div></el-col>
        </el-row>
        <!--分页列表显示-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="infoId"
                        label="访问ID">
                </el-table-column>          
                <el-table-column
                        prop="loginName"
                        label="登录账号">
                </el-table-column>
                <el-table-column
                        prop="ipaddr"
                        label="登录IP地址">
                </el-table-column>
                <el-table-column
                        width="90px"
                        prop="loginLocation"
                        label="登录地点">
                </el-table-column>
                <el-table-column
                        prop="browser"
                        label="浏览器类型">
                </el-table-column>
                <el-table-column
                        width="100px"
                        prop="os"
                        label="操作系统">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="登录状态"
                        :formatter="loginStatus">
                </el-table-column>
                <el-table-column
                        prop="msg"
                        label="提示消息">
                </el-table-column>
                <el-table-column
                        width="160px"
                        prop="loginTime"
                        label="访问时间">
                </el-table-column>
                <el-table-column label="操作" width="270">
                    <template slot-scope="scope">
                        <el-button  class="el-icon-delete"
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页插件-->
         <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                    :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
       
  </div>
</template>
<script>
export default {
      data() {
        return {
               tableData:[],
                currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                title:'',//查询功能
                dialogFormVisible:false,
                form:{}
               
      };
      },
       created:function(){
                this.loadData();
            },
            methods:{
                //加载数据
                loadData(){
                   //动态菜单请求
                          this.$http.post("/api/cs/loginLog/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{
                                            loginName:this.loginName
                                      }).then((response) => {
                                                 console.log(response);
                                              if(response.data.code==2000){
                                                  this.tableData = response.data.data.list;
                                                  this.total = response.data.data.total;
                                              }
                                })
                    
                },
                //各种绑定事件方法
                //每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
                  
                },
                //当前页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage=val;
                    this.loadData();
                   
                },
                //查询方法
                search(){
                   this.loadData();
                },
        
                loginStatus(row, columnc, cellValue){
                    return cellValue == 0 ? '成功':'失败'
                },

                //处理删除（ 部门删除）
                handleDelete(index, row) {
                    var _this = this;
                    console.log(index, row);
                    _this=this;
                    //确认弹框
                    this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //执行删除
                       this.$http.delete('/api/cs/loginLog/deleteById?infoId='+row.infoId)
                            .then(function (response) {
                                //判断删除是否成功
                                 if(response.data.code==2000){
                                     //提示
                                     _this.$message({
                                         type: 'success',
                                         message: '删除成功!'
                                     });
                                     //重新加载数据
                                     _this.loadData();
                                 }else {
                                     _this.$message.error(response.data.message);
                                 }
                            })
                            .catch(function (error) {
                                //失败处理
                                console.log(error);
                                _this.$message.error('删除失败!');
                            });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                }
            }
    }
</script>
<style>

</style>

